<template>
    <div>
        <h2>分页</h2>
        房型名称<input type="text" v-model="f.Tname" />
        搜索：<input type="button" value="搜索" @click="Shows">
        批量删除：<input type="button" value="删除" @click="Dels">
        <table class="table table-bordered">
            <tbody>
                <tr align="center">
                    <td>全选：<input type="checkbox" v-model="fcheck" @click="checkAll"></td>
                    <td>房行名称</td>
                    <td>房型价格</td>
                    <td>房型照片</td>
                    <td>状态</td>
                    <td>操作</td>
                </tr>
                <tr align="center" v-for="item in datas.list" :key="item.id">
                    <td><input type="checkbox" :value="item.id" v-model="ids" @change="checkOne"> </td>
                    <td>{{ item.typeName }}</td>
                    <td>{{ item.prices }}</td>
                    <td><img :src="item.imgs" width="80px" alt=""></td>
                    <td>{{ item.state }}</td>
                    <td> <input type="button" value="修改" @click="Upd(item.id)"></td>
                </tr>
            </tbody>

        </table>
        <input type="button" value="首页" @click="f.PageIndex = 1, Shows()">
        <input type="button" value="上一页" @click="f.PageIndex--, Shows()">
        <input type="button" value="下一页" @click="f.PageIndex++, Shows()">
        <input type="button" value="尾页" @click="f.PageIndex = datas.totalPage, Shows()">
    </div>
</template>

<script setup lang="ts">
import moment from 'moment'
import axios from 'axios'
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()


let datas: any = reactive({
    list: [],
    totalPage: 0,
    totalCount: 0
})

let f: any = reactive({
    PageIndex: 1,
    PageSize: 2,
    Tname: ""
})

//修改
const Upd = (id: any) => {


    let t = confirm("确认要修改吗?");
    if (t) {
        router.push({
            path: '/update',
            query: { id: id }
        });
    }

}





//批量操作
const Dels = () => {


    if (ids.value.length == 0) {
        alert("至少选择一项进行删除");
        return;
    }
    else {
        axios({
            url: '/api/Hotel/Updatess',
            method: 'put',
            params: {
                ids: ids.value.toString()
            }
        })
            .then((res) => {
                if (res.data > 0) {
                    alert("恭喜您删除成功!");
                    fcheck.value = false;
                    Shows();
                }
            })
            .catch((err) => {
                console.log(err);
                return;
            })
    }
}




let ids: any = ref([]);
let fcheck: any = ref([false]);

//全选

const checkAll = () => {
    fcheck.value = !fcheck.value;
    if (fcheck.value == true) {
        ids.value = datas.list.map((item: any) => {
            return item.Id;
        })
    } else {
        ids.value = [];
    }
    console.log(ids);

}



//反选
const checkOne = () => {
    if (ids.value.length == datas.list.length) {
        fcheck.value = true;
    } else {
        fcheck.value = false;
    }
}


onMounted(() => {
    Shows();
})

const Shows = () => {
    axios({
        url: "/api/Hotel/GetType",
        method: "get",
        params: f
    }).then((res: any) => {
        console.log(res);
        Object.assign(datas, res.data);
    }).catch((err: any) => {
        console.log(err);
        alert('失败了');
    })
}
</script>

<style scoped></style>